<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Example 11 - (Displaying an isometric grid)</title>
		
		<script>	

			window.onload = function () {
				var canvas = document.getElementById('myCanvas');
				var c = canvas.getContext('2d');

				var tile = new Image();
				tile.src = "../img/tile.png";

				draw();
				
				function draw() {
					
					c.clearRect (0, 0, canvas.width, canvas.height);

					for (var row = 0; row < 10; row++) {
						for (var col = 0; col < 10; col++) {
							var tilePositionX = (row - col) * tile.height;

							// Center the grid horizontally
							tilePositionX += (canvas.width / 2) - (tile.width / 2);

							var tilePositionY = (row + col) * (tile.height / 2);

							c.drawImage(tile, Math.round(tilePositionX), Math.round(tilePositionY), tile.width, tile.height);	
						}	
					}
				}
			}
		</script>
    </head>
    <body>
		<canvas id="myCanvas" width="600" height="300"></canvas>
    </body>
</html>